<template>
	<div id="quku_song">
		<div class="container">
			<div class="handle-box">
				<el-checkbox v-if="btnPermit" v-model="query.checked" @change="handleStatusChange" style="margin-bottom: 18px">
					<!-- 待审核 -->
					{{ $t('m.daiShenHeTick') }}
				</el-checkbox>
				<el-form ref="form" :inline="true" :model="form">
					<el-form-item label="">
						<el-input
							placeholder="ID"
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.ids"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							placeholder="歌曲名"
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.importName"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.actorImportName"
							placeholder="歌手名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.albumImportName"
							placeholder="专辑名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.cppoaName"
							placeholder="CP名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.isrc"
							placeholder="ISRC"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							v-model="query.creator"
							clearable
							@clear="handleSearch"
							placeholder="操作者"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.genre"
							placeholder="风格"
							class="handle-select mr10"
						>
							<el-option v-for="(item, index) in genres_3" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.status"
							placeholder="状态"
							class="handle-select mr10"
						>
							<el-option key="4" label="下线" value="4"></el-option>
							<el-option key="1" label="上线" value="1"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.priceType"
							placeholder="商业模式"
							class="handle-select mr10"
						>
							<el-option key="0" label="S1" value="S1"></el-option>
							<el-option key="1" label="S2" value="S2"></el-option>
							<el-option key="2" label="S3" value="S3"></el-option>
							<el-option key="3" label="S4" value="S4"></el-option>
							<el-option key="4" label="S5" value="S5"></el-option>
							<el-option key="5" label="S6" value="S6"></el-option>
							<el-option key="6" label="S7" value="S7"></el-option>
							<el-option key="7" label="S101" value="S101"></el-option>
							<el-option key="8" label="S102" value="S102"></el-option>
							<el-option key="9" label="S115" value="S115"></el-option>
							<el-option key="10" label="S116" value="S116"></el-option>
							<el-option key="11" label="S117" value="S117"></el-option>
							<el-option key="12" label="S118" value="S118"></el-option>
							<el-option key="13" label="S103" value="S103"></el-option>
							<el-option key="14" label="S104" value="S104"></el-option>
							<el-option key="15" label="S105" value="S105"></el-option>
							<el-option key="16" label="S106" value="S106"></el-option>
							<el-option key="17" label="S107" value="S107"></el-option>
							<el-option key="18" label="S108" value="S108"></el-option>
							<el-option key="19" label="S109" value="S109"></el-option>
							<el-option key="20" label="S110" value="S110"></el-option>
							<el-option key="21" label="S111" value="S111"></el-option>
							<el-option key="22" label="S112" value="S112"></el-option>
							<el-option key="23" label="S119" value="S119"></el-option>
							<el-option key="24" label="S120" value="S120"></el-option>
							<el-option key="25" label="S113" value="S113"></el-option>
							<el-option key="26" label="S114" value="S114"></el-option>
							<el-option key="27" label="S121" value="S121"></el-option>
							<el-option key="28" label="S122" value="S122"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button :disabled="disabled" type="primary" @click="handleSearch">
							<!-- 查询 -->
							{{ $t('m.queryBtn') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table
				:data="tableData"
				border
				class="table"
				ref="multipleTable"
				header-cell-class-name="table-header"
				:cell-style="cellStyle"
				v-if="tableData.length > 0"
			>
				<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
				<el-table-column prop="id" label="ID" width="auto" align="center" :show-overflow-tooltip="true"></el-table-column>

				<el-table-column
					prop="externalId"
					label="externalId"
					width="auto"
					align="center"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.importName }}</template>
				</el-table-column>

				<el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
				</el-table-column>

				<el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblAlbum ? scope.row.tblAlbum.name : '' }}</template>
				</el-table-column>

				<el-table-column width="auto" label="CP名称" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblCppartner ? scope.row.tblCppartner.name : '' }}</template>
				</el-table-column>

				<el-table-column width="auto" label="风格" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.genre }}</template>
				</el-table-column>

				<el-table-column width="auto" label="ISRC" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.isrc }}</template>
				</el-table-column>

				<el-table-column width="auto" label="状态" align="center">
					<template slot-scope="scope">
						<img
							v-if="scope.row.status == 1"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u464.png"
							alt=""
						/>
						<img
							v-else-if="scope.row.status != 1"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u468.png"
							alt=""
						/>
					</template>
				</el-table-column>

				<el-table-column width="auto" label="操作者" align="center" v-if="query.show">
					<template slot-scope="scope">{{ scope.row.modifiedBy }}</template>
				</el-table-column>

				<el-table-column width="auto" label="更新时间" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.updateTime }}</template>
				</el-table-column>

				<el-table-column v-if="!query.show" width="auto" label="商业模式" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblSongAuthTerritories.priceType }}</template>
				</el-table-column>

				<el-table-column label="试听" prop="preview" align="center" v-if="!query.show">
					<template slot-scope="scope">
						<!-- <a
                            v-if="scope.row.tblSongfiles && scope.row.tblSongfiles[0].filePath !== ''"
                            @click="handleClick($event, scope.row, scope.$index)"
                            style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                        >
                            <svg-icon
                                :data_iconName="scope.row.paused ? '播放' : '暂停'"
                                :className="scope.row.paused ? 'play_icon' : 'pause_icon'"
                            />
                        </a> -->
						<a
							v-if="scope.row.m3u8Path"
							@click="handleClick($event, scope.row, scope.$index)"
							style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
						>
							<svg-icon
								:data_iconName="scope.row.paused ? '播放' : '暂停'"
								:className="scope.row.paused ? 'play_icon' : 'pause_icon'"
							/>
						</a>
					</template>
					<!-- <template slot-scope="scope">
                        <a
                            v-if="scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0"
                            @click="handleClick($event, scope.row, scope.$index)"
                            style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                        >
                            <svg-icon
                                :data_iconName="playlist[currentIndex].paused ? '播放' : '暂停'"
                                :className="playlist[currentIndex].paused ? 'play_icon' : 'pause_icon'"
                            />
                        </a>
                    </template> -->
				</el-table-column>
				<el-table-column width="288" label="管理" align="center">
					<template slot-scope="scope">
						<el-button
							@click="handleEdit(scope.$index, scope.row, 0)"
							v-if="!query.show"
							type="primary"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 查看 -->
							{{ $t('m.seeBtn') }}
						</el-button>
						<el-button
							@click="handleEdit(scope.$index, scope.row, 1)"
							v-if="!query.show"
							type="primary"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 编辑 -->
							{{ $t('m.editBtn') }}
						</el-button>

						<el-button
							@click="handleTagging(scope.$index, scope.row)"
							v-if="!query.show"
							type="warning"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 打标签 -->
							{{ $t('m.hitLabelBtn') }}
						</el-button>

						<el-button
							@click="handlePush(scope.$index, scope.row)"
							v-if="!query.show"
							type="success"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 推送 -->
							{{ $t('m.pushBtn') }}
						</el-button>

						<el-button @click="handleChecked(scope.$index, scope.row)" v-if="query.show" type="warning" size="mini"
							>审核</el-button
						>
					</template>
				</el-table-column>
			</el-table>

			<div class="pagination">
				<el-pagination
					background
					layout="total,sizes, prev, pager, next, jumper"
					:page-sizes="[5, 10, 20, 30]"
					@size-change="handleSizeChange"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 打标签弹出框 -->
		<el-dialog
			title="打标签"
			:visible.sync="editVisible"
			width="30%"
			:close-on-click-modal="false"
			:show-close="true"
			@close="handleClose_2"
		>
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="歌曲名">
					<el-input v-model="form.songName"></el-input>
				</el-form-item>
				<el-form-item label="歌手名">
					<el-input v-model="form.actorName"></el-input>
				</el-form-item>

				<el-form-item label="标签：">
					<div class="block">
						<el-cascader
							:show-all-levels="false"
							v-model="form.tags"
							class="w"
							:options="tagList"
							:props="{
								emitPath: false,
								multiple: true,
								checkStrictly: true,
								value: 'value',
								label: 'label',
								children: 'children'
							}"
							@change="handlechange"
						>
							<template slot-scope="{ node, data }">
								<span>{{ data.label }}</span>
								<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
							</template>
						</el-cascader>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveTagging">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 渠道弹出框 -->
		<el-dialog title="推送" :visible.sync="channelVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="渠道">
					<el-select v-model="channel" class="" style="width: 100%" clearable>
						<el-option key="0" label="OPPO" value="1001"></el-option>
						<el-option key="1" label="VIVO" value="1002"></el-option>
						<el-option key="2" label="XIAOMI" value="1003"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="channelVisible = false">取 消</el-button>
				<el-button type="primary" @click="savePush">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 播放歌词弹出框 -->
		<el-dialog
			:title="playerTitle"
			:visible.sync="playerVisible"
			width="500px"
			:close-on-click-modal="false"
			:show-close="false"
			@close="handleClose_1"
			aria-label="歌曲标题"
		>
			<scroll :data="[oLrc.ms.length > 0 ? oLrc.ms : []]" class="middle-r" ref="lyricList">
				<div class="lyric-wrapper">
					<div v-if="oLrc.ms.length > 0">
						<!-- 双语歌词 -->
						<!-- <p
                            ref="lyricLine"
                            class="text"
                            v-for="(line, index) in oLrc.ms"
                            :key="index"
                            :class="{
                                current: oLrc.ms[index].t == oLrc.ms[index].t ? currentLineNum - 1 === index : currentLineNum === index
                            }"
                        >
                            {{ line.c }}
                        </p> -->
						<p
							ref="lyricLine"
							class="text"
							v-for="(line, index) in oLrc.ms"
							v-if="!show"
							:key="index"
							:class="{
								current: currentLineNum - 1 === index
							}"
						>
							{{ line.c }}
						</p>
						<!-- 单语歌词 -->
						<p
							ref="lyricLine"
							class="text"
							v-for="(line, index) in oLrc.ms"
							v-if="show"
							:key="index"
							:class="{
								current: currentLineNum === index
							}"
						>
							{{ line.c }}
						</p>
					</div>
				</div>
			</scroll>

			<!-- 进度条 -->
			<div class="progressBar" v-if="0">
				<span class="startTime">{{ timeFormat(currentTime) }}</span>
				<!-- @change="changecurrentTime" -->
				<el-slider
					:show-tooltip="true"
					:format-tooltip="timestepToolTip"
					@change="changecurrentTime"
					@input="onProgressBarChange"
					:style="{}"
					v-model="currentTime"
					:max="musicAllDuration"
					class="progress"
					@mousedown.native="isChange = true"
					@mouseup.native="isChange = false"
				></el-slider>
				<span class="endTime">{{ timeFormat(musicAllDuration) }}</span>
			</div>
			<div class="btn-audio" v-if="0">
				<!-- 上一首歌曲 -->
				<div @click="prev" id="backSong"><span class="iconfont icon-shangyiqu" style="font-size: 20px"></span></div>
				<!-- 播放与暂停 -->
				<div class="status">
					<div id="pause" v-show="playing" @click="togglePlaying_1">
						<i class="el-icon-video-pause" style="font-size: 40px"></i>
					</div>
					<div id="play" v-show="!playing" @click="togglePlaying_1">
						<i class="el-icon-video-play" style="font-size: 40px"></i>
					</div>
				</div>
				<!-- 下一首歌曲 -->
				<div @click="next" id="nextSong"><span class="iconfont icon-xiayiqu" style="font-size: 20px"></span></div>
				<!-- 歌词 -->
				<div @click="handleShowLyric" id="album"><span style="font-size: 15px">词</span></div>
			</div>
			<aplayer @onpause="pause" v-if="playerVisible" :playerOptions="aOption[currentIndex]" />

			<el-button type="default" style="margin: 10px 0 0 400px" @click="handleClose_1()">关闭</el-button>
			<!-- </div> -->
		</el-dialog>
		<!-- <audio
                :src="currentSong.tblSongfiles && currentSong.tblSongfiles[0] ? currentSong.tblSongfiles[0].filePath : ''"
                ref="audio"
                @error="error"
                @play="ready"
                @canplay="getDuration"
                @timeupdate="updateTime"
                @ended="end"
            ></audio> -->
		<!-- <audio ref="audio" @error="error" @play="ready" @canplay="getDuration" @timeupdate="updateTime" @ended="end"></audio> -->
	</div>
</template>

<script>
	// import Lyric from '@/components/common/js/Lyric.js';
	// import BScroll from 'better-scroll';
	import Scroll from 'base/scroll/scroll';
	// import { qukusong } from './mixins/qukusong';
	import { qukusong } from './mixins/';
	// import Hls from 'hls.js';
	import { aplayer } from 'vue-hls-player';

	export default {
		name: 'QukuSong',
		mixins: [qukusong],
		data() {
			return {
				show: true,
				btnPermit: JSON.parse(localStorage.getItem('roles'))
					? JSON.parse(localStorage.getItem('roles')).includes('ADMIN') ||
					  JSON.parse(localStorage.getItem('roles')).includes('part-time job1')
					: false,
				// aOption: {
				//     type: 'application/x-mpegURL', //媒体类型，m3u8请给application/x-mpegURL或者application/vnd.apple.mpegURL，其他的会默认为普通音视频，注：微信不支持m3u8
				//     src: 'https://hls.allsaintsmusic.com/m/2e35a7284f6049afb1cf515400747a6d/1e384ffc7b13a707290a7ae3045fd155.m3u8', //音频地址
				//     preload: true, //是否预下载，默认为true
				//     autoplay: false, //是否自动播放（兼容性不太好），默认为false
				//     isLoop: false //是否循环，默认不循环
				//     // controls: 'progress,current,durration' //显示的控件,没有配置controls项则全部显示。
				// },

				aOption: [],
				disabled: false,
				// 歌词对象
				oLrc: {
					ti: '', //歌名
					ar: '', //作者
					al: '', //专辑名
					ms: [] //歌词数组 {t:时间，content:歌词}
				}
			};
		},

		methods: {
			// repeatEle(arr) {
			//     console.log(arr);
			//     for (var i = 0; i < arr.length; i++) {
			//         if (arr[i].t == arr[i + 1].t) {
			//             return false;
			//         }
			//     }
			//     return true;
			// },
			// changecurrentTime(v) {
			//     let currentTime = this.musicAllDuration * this.percent;
			//     let audio = document.querySelector('.player audio');
			//     audio.currentTime = currentTime; // 保证手指拖动释放后不弹回原位
			//     this.currentTime = currentTime;
			//     if (!this.playing) {
			//         this.togglePlaying_1();
			//     }
			//     this.highLight();
			//     this.isChange = false;
			// },

			// onProgressBarChange(v) {},
			updateTime(e) {
				if (this.isChange === true) return;
				// console.log('updateTime');
				this.currentTime = e.target.currentTime;
				this.currentLineNum = this.getLineNo(document.querySelector('.player audio').currentTime);

				this.highLight();
				this.currentLineNum++;
			},
			highLight() {
				if (this.currentLineNum >= 5) {
					let lineEl = this.$refs.lyricLine[this.currentLineNum - 4]; // this.$refs.lyricLine是p元素数组
					this.$refs.lyricList.scrollToElement(lineEl, 1000);
				} else {
					this.$refs.lyricList.scrollTo(0, 0, 1000);
				}
			},
			getLineNo(ct) {
				if (this.oLrc.ms.length === 0) {
					return -1;
				}
				if (ct >= parseFloat(this.oLrc.ms[this.currentLineNum].t)) {
					// 快进
					for (var i = this.oLrc.ms.length - 1; i >= this.currentLineNum; i--) {
						// 倒着查找比curT时间小的第一个值
						if (ct >= parseFloat(this.oLrc.ms[i].t)) {
							return i - 1;
						}
					}
				} else {
					// 后退
					for (var i = 0; i <= this.currentLineNum; i++) {
						if (ct <= parseFloat(this.oLrc.ms[i].t)) {
							// i-1 不然会导致字幕快一条
							return i - 1;
						}
					}
				}

				// for (var j = 0; j < this.oLrc.ms.length; j++) {
				//     console.log(this.oLrc.ms);
				//     if (this.oLrc.ms[j].t === this.oLrc.ms[j + 1].t) {
				//         // this.currentLineNum = this.currentLineNum - 1;
				//         return j - 2;
				//     } else {
				//         // this.currentLineNum = this.getLineNo(document.querySelector('.player audio').currentTime);
				//     }
				// }
			},
			async getLyric(id) {
				try {
					let url = '/song/getlrc';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							id
						})
					});
					console.log(res);
					// 方式1: 没歌词时无法播放
					// if (res.code === '3002') {
					//     return;
					// }
					// if (res.code != '0000') {
					//     throw new Error(res.message);
					// }
					// if (res.data.content) {
					//     this.oLrc = {
					//         ti: '', //歌名
					//         ar: '', //作者
					//         al: '', //专辑名
					//         ms: [] //歌词数组 {t:时间，content:歌词}
					//     };
					//     this.initLines(res.data.content);
					//     this.setPlayingState(true);
					//     // this.$refs.audio.play();

					//     if (Hls.isSupported()) {
					//         var hls = new Hls();
					//         var _this = this;
					//         hls.attachMedia(this.$refs.audio);
					//         hls.on(Hls.Events.MEDIA_ATTACHED, function() {
					//             hls.loadSource(_this.currentSong.m3u8Path);
					//             hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
					//                 if (_this.playing) {
					//                     _this.$refs.audio.play();
					//                 }
					//             });
					//         });
					//     }
					// } else {
					//     this.currentLineNum = 0;
					// }

					// 方式2: 解决没歌词时间也能播放
					this.oLrc = {
						ti: '', //歌名
						ar: '', //作者
						al: '', //专辑名
						ms: [] //歌词数组 {t:时间，content:歌词}
					};
					if (res.data) {
						this.initLines(res.data.content);
					}

					this.setPlayingState(true);
					// this.$refs.audio.src = this.currentSong.m3u8Path;
					// this.$refs.audio.play();

					// if (Hls.isSupported()) {
					//     var hls = new Hls();
					//     var _this = this;
					//     hls.attachMedia(this.$refs.audio);
					//     console.log(Hls.Events.MEDIA_ATTACHED);
					//     hls.on(Hls.Events.MEDIA_ATTACHED, function() {
					//         hls.loadSource(_this.currentSong.m3u8Path);
					//         hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
					//             if (_this.playing) {
					//                 _this.$refs.audio.play();
					//             }
					//         });
					//     });
					// }

					this.currentLineNum = 0;
				} catch (err) {
					console.dir(err);
					// 获取歌词失败时
					this.currentLineNum = 0;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},

			initLines(lrc) {
				if (!lrc) {
					return;
				}
				if (lrc.includes('\r\n')) {
					var lines = lrc.split('\r\n');
				} else if (lrc.includes('\n\r')) {
					var lines = lrc.split('\n\r');
				} else if (lrc.includes('\n')) {
					var lines = lrc.split('\n');
				} else if (lrc.includes('\r')) {
					var lines = lrc.split('\r');
				} else {
					var lines = [lrc];
				}

				// console.log(lines);
				lines = lines.filter((item) => {
					return item != '';
				});
				// console.log(lines);
				for (var i = 0; i < lines.length; i++) {
					var txt = lines[i].trim();
					var subTxt = txt.substring(txt.indexOf('[') + 1, txt.indexOf(']'));
					var subTxtArr = subTxt.split(':');
					console.log(subTxt, subTxtArr);
					// ==================处理含有原文和翻译歌词==============================
					// var txt = lines[i].trim();
					// var subTxt = txt.substring(txt.indexOf('[') + 1, txt.indexOf(']'));
					// var subTxtArr = subTxt.split(':');
					// console.log(subTxt, subTxtArr);

					// var txt2 = lines[i + 1].trim();
					// var subTxt2 = txt2.substring(txt2.indexOf('[') + 1, txt2.indexOf(']'));
					// var subTxtArr2 = subTxt2.split(':');

					// if (subTxt2 === subTxt) {
					//     [lines[i + 1], lines[i]] = [lines[i], lines[i + 1]];
					// }
					// console.log(subTxt2, subTxtArr2);
					// txt = lines[i].trim();
					// subTxt = txt.substring(txt.indexOf('[') + 1, txt.indexOf(']'));
					// subTxtArr = subTxt.split(':');
					// console.log(subTxt, subTxtArr);
					// ==================处理含有原文和翻译歌词==============================

					if (isNaN(parseInt(subTxtArr[0]))) {
						this.oLrc[subTxtArr[0]] = subTxtArr[1];
					} else {
						var times = txt.match(/\[(\d+:.+?)\]/g); // 匹配字符串中的日期，返回一个数组
						for (var j = 0; j < times.length; j++) {
							var one = times[j].substring(1, times[j].indexOf(']')).split(':');
							// console.log(one) // => ["05", "18.47"]

							this.oLrc.ms.push({
								t: (parseInt(one[0]) * 60 + parseFloat(one[1])).toFixed(3),
								c: txt.substr(txt.lastIndexOf(']') + 1)
							});
						}
					}
				}

				var bool = false;
				// 过滤空歌词
				this.oLrc.ms = this.oLrc.ms.filter((item) => {
					if (item.c + '' === '' || item.c + '' === 'null' || item.c + '' === 'undefined' || item.c + '' === 'NaN') {
						bool = true;
						return false;
					} else {
						return true;
					}
				});
				this.oLrc.ms.sort(function (a, b) {
					return a.t - b.t;
				});
				if (bool) {
					this.$message.warning({
						message: '歌词有问题',
						duration: 2000
					});
				}
				// 处理双语言歌词
				try {
					this.show = true;
					for (var i = 0; i < this.oLrc.ms.length; i++) {
						if (this.oLrc.ms[i].t == this.oLrc.ms[i + 1].t) {
							this.show = false;
						}
					}
				} catch (err) {
					console.dir(err);
				}
			},
			// prev() {
			//     if (!this.songReady) {
			//         return;
			//     }
			//     if (this.playlist.length === 1) {
			//         this.loop();
			//         return;
			//     } else {
			//         let index = this.currentIndex - 1;
			//         if (index === -1) {
			//             index = this.playlist.length - 1;
			//             this.tableData[0].paused = true;
			//             this.tableData[index].paused = false;
			//             this.SET_QUKUSONG_DATA([...this.tableData]);
			//         } else {
			//             this.tableData[this.currentIndex].paused = true;
			//             this.tableData[index].paused = false;
			//             this.SET_QUKUSONG_DATA([...this.tableData]);
			//         }
			//         document.querySelector('.player audio').currentTime = 0;
			//         this.currentLineNum = 0;

			//         this.setCurrentIndex(index);
			//         this.setPlayingState(true);
			//         this.playerTitle = '歌曲名: ' + this.currentSong.importName + ' 歌手名: ' + this.currentSong.actors.name;
			//     }

			//     this.songReady = false;
			// },

			// loop() {
			//     this.setPlayList([...this.playlist]); // 触发 currentSong 改变
			//     document.querySelector('.player audio').currentTime = 0;
			//     this.currentLineNum = 0;
			//     this.playerTitle = '歌曲名: ' + this.currentSong.importName + ' 歌手名: ' + this.currentSong.actors.name;
			//     this.setPlayingState(true);
			//     this.tableData[0].paused = false;
			//     this.SET_QUKUSONG_DATA([...this.tableData]);
			// },

			// next() {
			//     if (!this.songReady) {
			//         return;
			//     }
			//     if (this.playlist.length === 1) {
			//         this.loop();
			//         return;
			//     } else {
			//         let index = this.currentIndex + 1;
			//         if (index === this.playlist.length) {
			//             index = 0;
			//             this.tableData[this.playlist.length - 1].paused = true;
			//             this.tableData[index].paused = false;
			//             this.SET_QUKUSONG_DATA([...this.tableData]);
			//         } else {
			//             this.tableData[this.currentIndex].paused = true;
			//             this.tableData[index].paused = false;
			//             this.SET_QUKUSONG_DATA([...this.tableData]);
			//         }
			//         document.querySelector('.player audio').currentTime = 0;
			//         this.currentLineNum = 0;

			//         this.setPlayingState(true);
			//         this.setCurrentIndex(index);
			//         this.playerTitle = '歌曲名: ' + this.currentSong.importName + ' 歌手名: ' + this.currentSong.actors.name;
			//     }

			//     this.songReady = false;
			// },
			handleShowLyric() {
				this.showLyric = !this.showLyric;
			},
			timestepToolTip(v) {
				return this.timeFormat(v);
			},

			togglePlaying_1() {
				if (!this.songReady) {
					// 歌曲没加载好不让点
					return;
				}
				this.setPlayingState(!this.playing);
			},

			// getDuration() {
			//     this.musicAllDuration = document.querySelector('.player audio').duration;
			// },
			// end() {
			//     this.next();
			// },

			// ready() {
			//     this.songReady = true;
			//     console.log(this.songReady);
			// },
			// error() {
			//     this.songReady = true;
			// },
			togglePlaying_2(index) {
				console.log(index);
				// if (!this.songReady) {
				//     // 歌曲没加载好不让点
				//     return;
				// }
				this.setPlayingState(true);

				if (this.playlist[index].paused == true) {
					for (var i = 0; i < this.playlist.length; i++) {
						if (this.playlist[index].id != this.playlist[i].id) {
							this.playlist[i].paused = true;
						}
					}
					this.playlist[index].paused = false;
				}
				this.SET_QUKUSONG_DATA([...this.playlist]);
				this.setPlayList([...this.playlist]);
				this.setCurrentIndex(index);
				// this.getLyric(this.currentSong.id);
			},

			handleClick(e, row, index) {
				this.setCurrentIndex(index);
				this.playerVisible = true;
				this.playerTitle = '歌曲名: ' + row.importName + ' 歌手名: ' + row.actors.name;
				this.togglePlaying_2(index);
			},

			handleClose_1() {
				try {
					setTimeout(() => {
						this.playerVisible = false;
					}, 200);
					let tempData = [...this.tableData];
					tempData[this.currentIndex].paused = true;
					this.SET_QUKUSONG_DATA([...tempData]);
					this.setPlayingState(false);
					this.setCurrentIndex(-1);

					this.currentLineNum = 0;
					this.currentTime = 0;
					document.querySelector('.player audio').currentTime = 0;

					// this.currentLyric = null;
					this.oLrc = {
						ti: '',
						ar: '',
						al: '',
						ms: []
					};
				} catch (err) {}
			}
			// handleLyric({ lineNum, txt }) {
			//     console.log(lineNum, txt);
			//     this.currentLineNum = lineNum;
			//     if (lineNum >= 6) {
			//         let lineEl = this.$refs.lyricLine[lineNum - 5]; // this.$refs.lyricLine是p元素数组
			//         this.$refs.lyricList.scrollToElement(lineEl, 1000);
			//     } else {
			//         this.$refs.lyricList.scrollTo(0, 0, 1000);
			//     }
			// }
		},
		activated() {},
		watch: {
			currentSong: {
				deep: true,
				immediate: true,
				handler(newSong, oldSong) {
					console.log(newSong, oldSong);
					if (!newSong.id) {
						return;
					}
					// if (newSong.id === oldSong.id) {
					//     return;
					// } // 限制了单曲循环

					this.getLyric(newSong.id);
				}
			},
			playing(newPlaying) {
				console.log(newPlaying);
				this.$nextTick(() => {
					// let audio = this.$refs.audio;
					let audio = document.querySelector('.player audio');
					newPlaying ? audio.play() : audio.pause();
				});
			},
			playerVisible(a, b) {
				if (a === true) {
					this.$nextTick(() => {
						let audio = document.querySelector('.player audio');
						audio.ontimeupdate = this.updateTime;
						// ref: "audio",
						// ended:"end"
					});
				}
			}
		},
		components: {
			Scroll,
			aplayer
		},
		computed: {
			// percent() {
			//     return this.currentTime / this.musicAllDuration;
			// }
		}
	};
</script>

<style lang="scss">
	#quku_song {
		.el-dialog__wrapper[aria-label='歌曲标题'] {
			.el-dialog {
				.el-dialog__header {
					text-align: center;

					.el-dialog__title {
						font-size: 14px;
						color: #666;
						font-weight: bold;
					}
				}
				.el-dialog__body {
					padding: 0 20px 30px;
					.btn-audio {
						position: absolute;
						bottom: 0px;
						left: 50%;
						transform: translate(-50%, 0);
						width: 300px;
						height: 54px;

						display: flex;
						justify-content: center;
						align-items: center;

						.status {
							cursor: pointer;
							background: rgba($color: #000000, $alpha: 0.05);
							border-radius: 50%;
							width: 40px;
							height: 40px;
							line-height: 40px;
							text-align: center;
							&:hover {
								background: rgba($color: #000000, $alpha: 0.1);
							}
							margin: 0 10px 0;
						}
						#backSong,
						#nextSong {
							cursor: pointer;
							border-radius: 50%;
							width: 30px;
							height: 30px;
							line-height: 30px;
							text-align: center;
						}

						#backSong:hover,
						#nextSong:hover,
						#album:hover {
							color: #ed6566;
						}
						#nextSong {
						}
						#album {
							cursor: pointer;
							margin-left: 10px;
						}
					}

					.progressBar {
						width: 100%;
						height: 70px;
						line-height: 70px;
						display: flex;
						justify-content: center;
						align-items: center;
						.startTime {
							margin-right: 15px;
						}
						.progress {
							width: 200px;
						}
						.endTime {
							margin-left: 15px;
						}
					}

					.middle-r {
						display: inline-block;
						vertical-align: top;
						width: 100%;
						height: 400px;

						overflow: hidden;

						.lyric-wrapper {
							width: 80%;
							margin: 0 auto;
							overflow: hidden;
							text-align: center;

							.text {
								line-height: 40px;
								color: rgba(0, 0, 0, 0.5);
								font-size: 14px;

								&.current {
									color: #2ad181;
								}
							}
						}
					}
				}
			}
		}

		.table-header {
			.cell {
				white-space: nowrap !important;
			}
		}
		.handle-box {
			margin-bottom: 20px;
			.el-form {
				display: flex;
				flex-direction: row;
				.el-form-item {
					width: calc(100% / 10);
					.el-form-item__content {
						.el-select,
						.handle-input {
							width: 100%;
						}
					}
				}
			}
		}

		.handle-select {
			width: 120px;
		}

		.handle-input {
			/* width: 300px; */
			width: 69px;
			height: 28px;
			display: inline-block;
		}
		.table {
			width: 100%;
			font-size: 14px;
			.play_icon,
			.pause_icon {
				width: 43px;
				height: 37px;
			}
		}
		.red {
			color: #ff0000;
		}
		.mr10 {
			margin-right: 10px;
		}
		.table-td-thumb {
			display: block;
			margin: auto;
			width: 40px;
			height: 40px;
		}
		.el-slider__button {
			width: 6px;
			height: 6px;
		}
	}
</style>
